<template>
  <!-- <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div> -->
  <transition name="van-fade">
		<keep-alive include="case,manage,fans,my">
			<router-view/>
		</keep-alive>
	</transition>
</template>

<script>
export default{
  created () {
    const _this = this;
    const mainColor = _this.$store.getters.getMainColor;
    if(mainColor){
      _this.activeColor = mainColor;
    }else{
      //调用接口获取mainColor
      _this.getTabbar()
    }
  },
  beforeMount(){
	  console.log("componentDidMount",location.href)
	  localStorage.setItem('firstHref',location.href)
  },
  mounted () {
    const _this = this;
    // _this.shareInit()
  },
  methods: {
    getTabbar() {
      const _this = this;
      let params = {
        pageNo: 1,
        pageSize: 10
      }
      _this.$request.getTabbar(params).then(res=>{
        _this.activeColor = res.data.value.color
        _this.$store.commit('setMasterColor', res.data.value.color)
      })
    },
    shareInit() {
      const _this = this;
      const url = (location.href.split('#')[0])
      let params = {
          url: url
      }
      _this.$request.configJssdk(params).then(res=>{
        wx.config({
          debug: false,// 是否开启调试模式
          appId: res.data.appId,//appid
          timestamp: res.data.timestamp,// 时间戳
          nonceStr: res.data.nonceStr,// 随机字符串
          signature: res.data.signature,// 签名
          jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']// 需要使用的JS接口列表
        })
        wx.onMenuShareTimeline({ 
            title: "分享标题," + "分享描述分享描述分享描述分享描述分享描述分享描述分享描述分享描述分享描述分享描述分享描述分享描述分享描述", // 这是分享展示卡片的标题
            desc: "分享描述", // 分享描述
            link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg", // 分享图标
            success: function () {
                // 设置成功
            },
            fail:function(error){
              alert(JSON.stringify(error) )
            },
        })
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）这个是不支持加入描述的要注意一下
        wx.onMenuShareAppMessage({ 
            title: "测试标题", // 这是分享展示卡片的标题
            desc: "分享描述", // 分享描述
            link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg", // 分享图标
            success: function (ress) {
                // 设置成功
            },
            fail:function(error){
              alert(JSON.stringify(error) )
            },
        })
        wx.error(function(error) {
            alert(JSON.stringify(error));
        });
      })
    }
  }
}
</script>


<style lang="scss">
@import '@/assets/css/variable';
html{
  font-size: 10px !important;
  min-height: 100%;
}
@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 10px !important;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 11px !important;
    }
}
@media only screen and (min-width: 414px) and (max-width: 767px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 12px !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 16px !important;
    }
}
@media only screen and (min-width: 1024px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 20px !important;
    }
}
body{
    min-height: 100%;
    font-family: Avenir, Helvetica, Arial, sans-serif,'微软雅黑' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif,'微软雅黑' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  box-sizing: border-box;
}
.ql-editor .ql-align-center{
	text-align: center;
}
p{
  margin-bottom: 0 !important;
}
img{
  width: 100% !important;
}
.load-more{
  text-align: center;
  background-color: white;
  margin: 0 1rem;
}
.no-data{
  text-align: center;
}
.d-none{
  display: none;
}

.border-r-l{
  border-radius: 0.8rem;
}
.border-r-m{
  border-radius: 0.6rem;
}

.title-l{
  font-size: 1.8rem;
  font-weight: bold;
  color: #111;
}
.title-m{
  font-size: 1.6rem;
  font-weight: bold;
  color: #222;
}
.title-s{
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
}

.padding-all{
  padding: 0.8rem;
}
.padding-all-m{
  padding: 1.4rem;
}
.padding-all-l{
  padding: 1.7rem;
}
.padding-lr{
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.padding-lr-l{
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.color-ll{color: #111;}
.color-l{color: #333;}
.color-m{color: #666;}
.color-s{color: #999;}
.margT-s{margin-top:0.3rem;}
.margT-m{margin-top:0.4rem;}
.margT-l{margin-top:1rem;}
.margL-m{margin-left:0.6rem;}
.margL-l{margin-left:1rem;}
.margB-l{margin-bottom:1rem;}
.t-center{
  text-align: center;
}
.t-bold{
  font-weight: bold;
}
.tabbar-height{
  height: 50px;
  width: 100%;
  background-color: white;
}
.line-height-m{
  line-height: 1.3em;
}
.line-height-l{
  line-height: 1.5em;
}
.main-bg{
  background-color: $main-bgc;
}
.fs-12{ font-size: 1.2rem; }
.fs-13{ font-size: 1.3rem; }
.fs-14{ font-size: 1.4rem; }
.fs-15{ font-size: 1.5rem; }
.fs-16{ font-size: 1.6rem; }
.fs-18{ font-size: 1.8rem; }

.fix-bottom {
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
  }
</style>
